<template>
  <view>
    <view class="medical-record-list">
      <view
        class="list-item"
        v-for="(item, index) in props.medicalRecordList"
        :key="index"
        @tap="handleClick(item)"
      >
        <view class="top-wrap">
          <text class="name">{{ nameMap[item.recordType] }}</text>
          <view class="num-wrap">
            <text class="num">{{ item.num }}</text>份
            <image src="https://ainengli.meilianshuke.com/jkhx/patient/arrow-right-c.png" class="img_more" />
          </view>
        </view>
        <view class="time">更新时间：{{ proxy.utils.date.format(item.lastTime, 'yyyy-MM-dd') || '-' }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue';
const { proxy } : any = getCurrentInstance();
const props = defineProps({
  medicalRecordList: {
    type: Array,
    default: () => []
  }
});
const nameMap = {
  outpatient_record: '门诊病历',
  prescription: '处方',
  examination_sheet: '检查单'
}

const handleClick = (item: any) => {
  if (item.recordType !== 'outpatient_record') {
    uni.showModal({
      title: '提示',
      content: '暂未支持查看',
      showCancel: false,
      confirmColor: '#00d1b6'
    })
    return;
  }
  uni.navigateTo({
    url: `/pages/archive/medical-record-list?recordType=${item.recordType}`
  })
}
</script>

<style scoped lang="scss">
.medical-record-list {
  margin: 32rpx;
  border-top: 2rpx solid #FFFFFF;
  background: linear-gradient(to bottom, #F3FFFA 0%,  #FFFFFF 15%, #FFFFFF 100%);
  border-radius: 24rpx;
  padding: 32rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 24rpx;
  position: relative;
  top: -62rpx;
  z-index: 10;
  .list-item {
    flex: 0 0 calc(50% - 13rpx);
    height: 212rpx;
    background-image: url('https://ainengli.meilianshuke.com/jkhx/patient/medical-record-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 24rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top-wrap {
      .name {
        font-size: 30rpx;
        font-weight: bold;
        color: #033335;
        margin-bottom: 8rpx;
      }
      .num-wrap {
        display: flex;
        align-items: center;
        gap: 4rpx;
        font-size: 28rpx;
        color: #296576;
        .num {
          font-size: 40rpx;
          font-weight: bold;
          color: #033335;
        }
        
        .img_more {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
    .time {
      font-size: 22rpx;
      color: #8BAEB7;
    }
  }
}
</style>
